<template>
  <div class='page-container'>
    <div id="px-render" class="stage"></div>

    <div class="control-wrap">
      <van-button type="primary" @click="play">播放</van-button>
      <van-button type="danger" @click="stop">停止</van-button>
    </div>
  </div>
</template>
<script>
import * as PIXI from 'pixi.js'
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);
let woodScript;
let groundScript;
export default {
  name: 'animateDemo',
  components: {},
  computed: {
  },
  data() {
    return {
      app: null,
      person: null,
      personRun: null,
      snowNum: 200,
      snows: [],
    }

  },
  created() {
  },
  mounted() {
    this.init()
    // this.initBg()
  },
  beforeDestroy() {
  },
  methods: {
    init() {
      let vm = this
      // 创建一个 Pixi应用 需要的一些参数
      let option = {
        width: 1286,
        height: 640,
        transparent: true,
      }
      // 创建一个 Pixi应用
      this.app = new PIXI.Application(option);
      // 获取渲染器
      let renderer = this.app.renderer;
      let stage = this.app.stage;
      let playground = document.getElementById('px-render');
      // 把 Pixi 创建的 canvas 添加到页面上
      playground.appendChild(renderer.view);

      //设置别名
      let TextureCache = PIXI.utils.TextureCache;
      let Texture = PIXI.Texture;
      let Rectangle = PIXI.Rectangle;
      let AnimatedSprite = PIXI.extras.AnimatedSprite;

      //需要加载的雪碧图的地址（该图片服务器端已做跨域处理）
      let imgURL = "https://statich5.gaoyong2021.com/pixiDemo/dnf.png";
      let woodUrl = "https://statich5.gaoyong2021.com/pixiDemo/wood.jpg";
      let groundUrl = "https://statich5.gaoyong2021.com/pixiDemo/ground.png";

      //加载图像，加载完成后执行setup函数
      PIXI.loader.add([imgURL, woodUrl, groundUrl]).load(setup);


      function setup() {
        let resources = PIXI.loader.resources;
        woodScript = new PIXI.extras.TilingSprite(
          resources[woodUrl].texture, 1286, 640
        );

        groundScript = new PIXI.extras.TilingSprite(
          resources[groundUrl].texture, 1286,179
        );
        groundScript.y = 640-179;

        stage.addChild(woodScript);
        stage.addChild(groundScript);
        //获取纹理
        let base = TextureCache[imgURL];

        //第一个纹理
        let texture0 = new Texture(base);
        texture0.frame = new Rectangle(0, 0, 80, 143);
        //第二个纹理
        let texture1 = new Texture(base);
        texture1.frame = new Rectangle(80, 0, 80, 143);
        //第三个纹理
        let texture2 = new Texture(base);
        texture2.frame = new Rectangle(160, 0, 80, 143);
        //第四个纹理
        let texture3 = new Texture(base);
        texture3.frame = new Rectangle(240, 0, 80, 143);

        //创建纹理数组
        let textures = [texture0, texture1, texture2,texture3];
        //创建动画精灵
        vm.person = new PIXI.extras.AnimatedSprite(textures);
        //设置动画精灵的速度
        vm.person.animationSpeed=0.1;
        vm.person.width = 160
        vm.person.height = 357.5
        vm.person.position.set(100, 176)
        //把动画精灵添加到舞台
        vm.app.stage.addChild(vm.person);
        //播放动画精灵
        vm.play()

        for (let i = 0; i < vm.snowNum; i++) {
          let snow = new PIXI.Graphics()
          snow.beginFill(0xffffff, Math.random())
          snow.drawCircle(1286 * Math.random(), 640*Math.random(),  5* Math.random()+2);
          snow.endFill();
          snow.name = `snow${i}`
          snow.x = Math.random() * 1286;
          snow.y = Math.random() * 640;
          vm.snows.push(snow)
          vm.app.stage.addChild(snow);
        }

        vm.app.ticker.add(() => {
          for (let i=0; i<vm.snowNum; i++) {
            vm.snows[i].y+=1
            if(vm.snows[i].y > 640) {
              vm.snows[i].y = 0
            }
          }
        })
      }
    },
    gameLoop() {
      // 循环调用gameLoop
      if(this.personRun) {
        requestAnimationFrame(this.gameLoop);
      }
      // 更新当前的游戏状态
      woodScript.tilePosition.x -= 1;
      groundScript.tilePosition.x -= 5;
      // console.log(this.app.stage.getChildByName('snow0'));
      // 渲染舞台
      this.app.renderer.render(this.app.stage);
    },
    play() {
      if(!this.personRun) {
        this.personRun = true
        this.gameLoop();
      }
      this.person.play()
    },
    stop() {
      this.personRun = false
      this.person.stop()
    },
  }
}
</script>

<style scoped lang="less">
.page-container {
  .stage {
    width: 100%;
    /deep/ canvas {
      width: 100%;
    }
  }

  .control-wrap {
    display: flex;
    justify-content: space-around;
  }
}
</style>
